<template>
	<div class="xiao">
		<aside>
			<h3>小众种草</h3>
			<span>游侠客独一无二的体验</span>
			
			<div class="xiaos swiper">
				<ul class="imgs swiper-wrapper">
				<li v-for="item in imgs" :key="item.id" class="swiper-slide">
					<img :src="item.img" >
					<h4>{{item.mtxt}}</h4>
					<h5>{{item.mitxt}}</h5>
				</li>
			</ul>
			</div>
			</aside>
	</div>
</template>

<script>
	import { onMounted } from 'vue';
	
	//引入Swiper的动态组件
	import Swiper , {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'Xiao',
		data(){
			return{
				imgs:[
					
					{id:1,img:'xiaocao/6.jpg' ,mtxt:'开路先锋' ,mitxt:'探索无止境'},
					{id:2,img:'xiaocao/5.jpg' ,mtxt:'红叶季' ,mitxt:'邂逅浪漫红叶'},
					{id:3,img:'xiaocao/4.jpg' ,mtxt:'蓝冰季' ,mitxt:'邂逅梦幻蓝冰'},
					{id:4,img:'xiaocao/3.jpg' ,mtxt:'向野房车' ,mitxt:'新型旅行方式'},
					{id:5,img:'xiaocao/2.jpg' ,mtxt:'银杏特辑' ,mitxt:'醉美银杏观赏地'},
					{id:6,img:'xiaocao/1.jpg' ,mtxt:'徒步赏秋' ,mitxt:'寻觅撩人秋色'},
				]
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.xiaos' , {
					slidesPerView : 3,
				})
			})
		}
	}
</script>

<style scoped>
	.xiao{
		width: 100%;
		height: 2.6rem;
		
	}
	.xiao aside{
		width: 100%;
		line-height: 1.3rem;
	}
	
	.xiao aside h3{
		width: 25%;
		float: left;
		font-size: 0.5rem;
		font-weight: bold;
		margin-left: 0.3rem;
	}
	
	.xiao aside span{
		width: 75%;
		font-size: 0.2rem;
		background-color: rgba(255, 176, 121,0.3);
		color: rgb(255, 176, 121);
		border-radius: 0.25rem;
	}
	
	.imgs li{
		width: 4.2rem;
		height: 4.6rem;
		
	}
	

	
	.imgs{
		height: 6.4rem;
	}
	
	.imgs li img{
		width: 98%;
		height: 100%;
	}
	
	.imgs li:first-child img{
		border-radius: 0.3rem 0rem 0rem 0.3rem;
	}
	
	.imgs li:last-child img{
		border-radius: 0rem 0.3rem 0.3rem 0rem;
	}
	
	
	h4,h5{
		position: relative;
		top: -3.5rem;
		color: white;
		z-index: 100;
		text-align: center;
	}
	
	.imgs li h4{
		font-size: 0.45rem;
		font-weight: bold;
		position: relative;
		top: -2.5rem;
	}
	
	.imgs li h5{
		position: relative;
		top: -3.1rem;
		font-weight: bold;
		font-size: 0.4rem;
		z-index: 100;
	}

</style>
